@include base {
    &-footer {
        $slogan-font-size: (
            default: 14px,
            sm: 16px,
            md: 18px,
            lg: 20px
        );
        $h3-font-size: (
            default: 16px,
            sm: 18px,
            md: 20px,
            lg: 24px
        );
        $h3-margin: (
            default: 5px,
            sm: 10px,
            md: 15px,
            lg: 25px
        );
        $li-font-size: (
            default: 14px,
            lg: 16px
        );
        $li-width: (
            default: 100%,
            sm: 25%,
        );
        $li-width-last: (
            default: 100%,
            sm: 50%,
        );
        $logo-height: (
            default: 33px,
            sm: 33px,
            md: 44px
        );
        $main-padding: (
            default: 30px 0,
            sm: 60px 0
        );
        $aside-font-size: (
            default: 12px,
            sm: 14px,
            md: 16px
        );
        
        background-color: #3a85fa;
        
        &__main {
            @include responsive($main-padding, padding);
        }
        
        &__logo {
            background: url('~assets/images/logo-white.png') no-repeat right center;
            background-size: auto 100%;
            margin-bottom: 10px;
            @include responsive($logo-height, height);
        }
        
        &__slogan {
            color: #fff;
            text-align: right;
            @include responsive($slogan-font-size, font-size);
        }
        
        &__menu {
            .item {
                float: left;
                position: relative;
                margin-top: 15px;
                @include responsive($li-width, width);
                
                h3 {
                    font-weight: normal;
                    color: #fff;
                    position: relative;
                    padding-left: 28px;
                    @include responsive($h3-font-size, font-size);
                    @include responsive($h3-margin, margin-bottom);
                    
                    &:before {
                        width: 7px;
                        height: 7px;
                        background-color: #fff;
                        content: '\20';
                        display: block;
                        position: absolute;
                        left: 0;
                        top: 50%;
                        margin-top: -3px;
                    }
                }
                
                ul, li {
                    margin: 0;
                    padding: 0;
                    list-style: none;
                    line-height: 1.8;
                }
                
                li {
                    padding-left: 30px;
                }
                
                li, a {
                    color: rgba(255, 255, 255, .5);
                    text-decoration: none;
                    @include transition(color 400ms ease);
                    @include responsive($li-font-size, font-size);
                }
                
                a:hover {
                    color: #fff;
                }
                
                &:last-child {
                    @include responsive($li-width-last, width);
                }
                
                &:after {
                    content: '\20';
                    display: block;
                    width: 1px;
                    height: 110px;
                    background: url('~assets/images/line.png') no-repeat center top;
                    background-size: 100% 100%;
                    position: absolute;
                    top: 20px;
                    left: 3px;
                }
            }
        }
        
        &__aside {
            padding: 20px 0;
            text-align: center;
            background-color: #2c74e4;
            @include responsive($aside-font-size, font-size);
            
            &, a {
                color: rgba(255, 255, 255, .5);
                text-decoration: none;
                @include transition(color 400ms ease);
            }
            a:hover {
                color: #fff;
            }
            span {
                display: inline-block;
            }
        }
    }
}

@include adaptive(sm) {
    @include base {
        &-footer {
            &__logo {
                margin-bottom: 15px;
                background-position: left center;
            }
            &__slogan {
                text-align: left;
            }
            &__menu {
                .item {
                    margin-top: 0;
                }
            }
        }
    }
}